<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式数据</title>
</head>

<body>
  <!-- 容器 -->
  <div id="app">
    <div id="msg"></div>
    <input type="text" oninput="changevalue(this)">
  </div>

  <script>
    // 数据源
    var userinfo = {
      // 此处数据敏感 不想让人直接得到，得到时加工一下
      name: '对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖'
    }

    // 空对象，用于劫持
    var obj = {}
    Object.defineProperty(obj, 'name', {
      // 获取数据时会触发
      get() {
        // return userinfo.name.substr(0, 3)
        return userinfo.name
      },
      // 修改数据时会触发
      set(data) {
        userinfo.name = data
        // 通知dom进行更新
        document.querySelector('#msg').innerHTML = data
        // 必须写，不然在严格模式下会报错
        return true
      }
    })

    // 开始时渲染数据
    document.querySelector('#msg').innerHTML = obj.name

    // 发布订阅
    function changevalue(elobj) {
      // 输入框中的数据
      let value = elobj.value
      // 更新数据源
      obj.name = value
      return true
    }



  </script>
</body>

</html>